<template>
  <div>
    <div class="list" v-if="showList">
      <el-card>
        <div class="q-crumb">
          <i class="q-icon fa fa-keyboard-o"></i>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>反馈列表</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="tool" style="text-align:left">
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="addFeedback">
                我要反馈
            </el-button>
        </div>
        <ul class="feedback-list">
          <li v-for="item in feedbackList" :key="item.id">
            <p class="cont" style="margin-bottom: 5px">
              <label>类型：</label>
              {{type_map[item.type]}}
            </p>
            <p class="cont" style="margin-bottom: 5px">
              <label>提问者：</label>
              {{item.creator_name}}
            </p>
            <p class="des" style="cursor: pointer; color:#42b6fb; margin-bottom: 5px" @click="detail(item)">
              {{item.title}}
            </p>
          </li>
        </ul>
      </el-card>

      <el-dialog
        title="反馈"
        :visible.sync="dialogVisible"
        width="70%">
        
        <el-form ref="dataForm" :model="formItem" label-width="80px" :rules="rules" style="width: 800px; margin-left:50px;">
          <el-form-item label="标题" prop="title">
            <el-input v-model="formItem.title"></el-input>
          </el-form-item>
          <el-form-item label="类型" style="text-align: left;">
            <el-radio-group v-model="formItem.type">
              <el-radio label="1">建议</el-radio>
              <el-radio label="2">反馈</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="formItem.contact"></el-input>
          </el-form-item>
          <el-form-item label="正文" prop="comment">
            <editor v-model="formItem.comment"></editor>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <div class="detail" v-if="showDetail" style="padding: 20px 400px">
      <el-card>
        <div class="tool" style="text-align:left">
            <el-button class="filter-item" style="margin-bottom: 30px;" type="primary" @click="cancelFun">
                返回
            </el-button>
        </div>
        <div class="q-crumb">
          <div>{{ detailData.title }}</div>
        </div>
        <div style="text-align: left; font-size: 12px; color: #666; margin-bottom: 50px">
          {{ detailData.creation_time }} &nbsp;&nbsp;&nbsp;&nbsp; 提问者: {{ detailData.creator_name }} &nbsp;&nbsp;&nbsp;&nbsp; 类型: {{ type_map[detailData.type] }}
        </div>
        <div class="content" style="text-align: left; margin-bottom: 50px" v-html="detailData.comment">
        </div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="回复列表" name="comment_list">
            <ul class="feedback-list">
              <div class="tip"  v-for="item in answerList" :key="item.id">
                <p class="cont" style="margin-bottom: 5px">
                  <span style="cursor: pointer;color: #1598d6" @click="readyToAnswer(item.from_user_name, item.from_user_id)">{{ item.from_user_name }}</span>
                  <span style="margin: 0 10px">回复</span>
                  <span style="cursor: pointer;color: #f60" @click="readyToAnswer(item.to_user_name, item.to_user_id)">{{ item.to_user_name }}</span>
                  <span style="margin: 0 20px; color: #ccc">{{ item.creation_time }}</span>
                </p>
                <p style="font-size: 14px;">
                  {{ item.comment }}
                </p>
              </div>
            </ul>
          </el-tab-pane>
        </el-tabs>
        <div class="answer">
          <el-input
            type="textarea"
            :rows="5"
            :placeholder="placeholder"
            style="width: 100%"
            v-model="answer">
          </el-input>
          <div class="dialog-footer" style="text-align:left;margin-top: 20px">
            <el-button @click="toAnswer" type="primary">回 复</el-button>
          </div>
        </div>
      </el-card>

      <!-- <el-dialog
        title="回复"
        :visible.sync="dialogVisible2"
        width="40%">
          <el-input
            type="textarea"
            :rows="5"
            :placeholder="placeholder"
            style="width: 100%"
            v-model="answer">
          </el-input>
          <div class="dialog-footer" style="text-align:left;margin-top: 20px">
            <el-button @click="toAnswer" type="primary">回 复</el-button>
          </div>
      </el-dialog> -->
    </div>
  </div>
</template>
<script>
import feedbackApi from "@/api/feedback.js";
import editor from "@/components/editor";

export default {
  components: { editor },
  data() {
    return {
      showList: true,
      showDetail: false,
      feedbackList: [],
      dialogVisible: false,
      formItem: {
        title: null,
        type: '1',
        contact: null,
        comment: ''
      },
      type_map: {
        1: '建议',
        2: '反馈'
      },
      rules: {
        title: [{ required: true, message: '请填写标题', trigger: 'blur' }],
        comment: [{ required: true, message: '请填写内容', trigger: 'blur' }]
      },
      detailData: {
        comment: "",
        contact: "",
        creation_time: "",
        creator_name: "",
        creator_name: "",
        creator_id: 0,
        title: "",
        type: 1,
        id: 0,
      },
      activeName: 'comment_list',
      answer: "",
      to_user_id: 0,
      answerList: null,
      to_user_name: "",
      placeholder: "请输入回复内容",
      dialogVisible2: false,
      answerData: null
    };
  },
  computed: {
    userId() {
      return this.$store.state.login.userid;
    },
    userName() {
      return this.$store.state.login.nickname
    }
  },
  methods: {
    cancelFun() {
      this.showList = true
      this.showDetail = false
    },
    getFeedbackList() {
      feedbackApi.getFeedback().then(res => {
        this.feedbackList = res.data.data;
      });
    },
    addFeedback() {
      this.dialogVisible = true
      this.formItem = {
        title: null,
        type: '1',
        contact: null,
        comment: ''
      },
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    getAnswers(id) {
        feedbackApi.getAnswers(id).then(res => {
          this.answerList = res.data.data
        })
    },
    detail(item) {
      this.detailData = item
      this.showList = false
      this.showDetail = true
      // 获取评论列表
      this.getAnswers(this.detailData.id)
    },
    submit() {
      this.$refs['dataForm'].validate((valid) =>  {
        if (valid) {
          this.formItem.type = parseInt(this.formItem.type)
          feedbackApi.createFeedback(this.formItem).then(() => {
            this.dialogVisible = false,
            this.$message({
              type: 'success',
              message: '提交成功'
            })
            this.getFeedbackList()
          })
          .catch(err => {
            this.$message.error(err)
          })
        }
      })
    },
    toAnswer() {
      const to_user_id = this.detailData.creator_name

      this.answerData = {
        feedback_id: this.detailData.id,
        from_user_id: this.userId,
        from_user_name: this.userName,
        comment: this.answer,
        to_user_id: this.detailData.creator_id,
        to_user_name: this.detailData.creator_name
      }

      if (this.answer == "") {
        this.$message.error("回复内容不能为空")
        return 
      }

      if (this.answerData.to_user_id == this.userId) {
        this.$message.error("不能回复自己")
        return 
      }

      feedbackApi.createAnswer(this.answerData).then(() => {
        this.$message({
          type: 'success',
          message: '回复成功'
        })
        this.answer = ""
        this.dialogVisible2 = false
        this.getAnswers(this.detailData.id)
      })
    },
    readyToAnswer(to_user_name, to_user_id) {
      this.dialogVisible2 = true
      this.answerData = {
        feedback_id: this.detailData.id,
        from_user_id: this.userId,
        from_user_name: this.userName,
        comment: this.answer,
        to_user_id: to_user_id,
        to_user_name: to_user_name
      }
      this.placeholder = `回复${to_user_name}`
    }
  },
  created() {
    this.getFeedbackList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.feedback-list {
  text-align: left;
  padding: 10px 0;
  li {
    padding: 15px 20px;
    border: 1px solid #eee;
    margin-bottom: 15px;
    label {
      display: inline-block;
      width: 60px;
    }
  }
  .des {
    font-size: 16px;
    color: #333;
  }
  .cont {
    margin-top: 8px;
    font-size: 12px;
    color: #999;
  }
}

.tip {
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin-bottom: 20px;
}
</style>
